<script setup>
    import {getBookListAPI} from "@/api/book.js"
    import {ref} from "vue"


    // 图书列表
    const bookList = ref([])
    // 获取图书列表
    const getBookList = async () => {
        bookList.value = await getBookListAPI()
    }
    getBookList()

</script>

<template>
    <div class="table-box">
        <el-card
        shadow="never">
            <template #header>
                <h3>图书列表展示</h3>
            </template>
            <template #default>
                <el-button type="success" plain>添加图书</el-button>
                <el-button type="danger" plain>批量删除</el-button>
                <el-table
                border
                stripe
                :data="bookList">
                    <el-table-column type="selection" 
                    width="55"
                    label="选择" />
                    <el-table-column 
                    label="图书ID"
                    prop="id"
                    width="100"></el-table-column>
                    <el-table-column 
                    label="书名"
                    prop="bookName"
                    width="300"></el-table-column>
                    <el-table-column 
                    label="作者"
                    prop="author"
                    width="200"></el-table-column>
                    <el-table-column 
                    label="数量"
                    prop="count"
                    width="140"></el-table-column>
                    <el-table-column 
                    label="定价"
                    prop="price"
                    width="140"></el-table-column>
                    <el-table-column 
                    label="出版社"
                    prop="publish"
                    width="220"></el-table-column>
                    <el-table-column 
                    label="状态"
                    prop="statusCN"
                    width="140"></el-table-column>
                    <el-table-column 
                    label="操作"
                    min-width="200">
                        <template #default>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #footer>
                <el-pagination 
                background 
                layout="prev,pager,next"
                :total="1000"></el-pagination>
            </template>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
    .table-box {
        margin: 15px auto;
        height: 80vh;
        width: 92vw;
        :deep(.el-card__header) {
            h3 {
                margin: 0;
                text-align: center;
            }
        }
        :deep(.el-card__body) {
            .el-table {
                margin-top: 10px;
            }
        }
        :deep(.el-card__footer) {
            display: flex;
            justify-content: center;
        }
    }
</style>